<template>
	<view>
		<view>
			<table-title content="装修服务办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor"></view-item>
				<view-item name="房间号" :value="userMsg.userRoom" :isLast="true"></view-item>
			</view>
			<view>
				<small-title content="是否自行装修"></small-title>
				<radio-group class="radiogroup-style" :disabled="!(state === '待申请' || state === '已驳回')">
					<view class="first-radio">
						<radio @click="chooseWork" :disabled="!(state === '待申请' || state === '已驳回')" :checked="!publicChecked" color="#FF0000"></radio>
						<view>自行装修</view>
					</view>
					<view class="second-radio">
						<radio @click="choosePublic" :disabled="!(state === '待申请' || state === '已驳回')" :checked="publicChecked" color="#FF0000"></radio>
						<view>否</view>
					</view>
				</radio-group>
			</view>
<!-- 			<view v-if="publicChecked">
				<small-title content="是否自行设计"></small-title>
				<radio-group class="radiogroup-style" :disabled="!(state === '待申请' || state === '已驳回')">
					<view class="first-radio">
						<radio @click="chooseSelf" :disabled="!(state === '待申请' || state === '已驳回')" :checked="selfChecked" color="#FF0000"></radio>
						<view>自行设计</view>
					</view>
					<view class="second-radio">
						<radio @click="chooseOther" :disabled="!(state === '待申请' || state === '已驳回')" :checked="!selfChecked" color="#FF0000"></radio>
						<view>否</view>
					</view>
				</radio-group>
			</view> -->
			<view v-if="publicChecked && status !== 0">
				<small-title :isNeed="true" content="选择绘图人员"></small-title>
				<view class="small-title">
					<select-lay :disabled="!(status==1)" :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>
				</view>
			</view>
			<view v-if="status > 1 || status == 0     ">
				<small-title :isNeed="true" content="上传平面设计图"></small-title>
				<view class="img-repair">
					<uni-file-picker 
						v-model="imageValue"  
						file-mediatype="image"
						mode="grid"
						file-extname="png,jpg"
						:limit="9"
						ref="files"
						:auto-upload="false"
						:readonly="!(status === 3 && userRightDetail.decoration.mapCommRight)"
						@select="select"
						@delete="deleteImg"
					/>
				</view>
			</view>
			<!-- <con-advance-pay-small-title v-if="state==='待支付'" content="支付方式"></con-advance-pay-small-title> -->
			<view v-if="status > 6 && status < 11">
				<small-title :isNeed="true" content="选择工程负责人"></small-title>
				<view class="small-title">
					<select-lay :disabled="status !== 7" :value="tval2" name="name" :options="datalist2" @selectitem="selectitem2"></select-lay>
				</view>
			</view>
			<small-title v-if="status > 6 && status < 11" :isNeed="true" content="支付信息截图"></small-title>
			<image v-if="status > 6 && status < 11" :class="chargeImg=='/static/uploadImg.png' ? 'pay-image' : 'pay-image-border'" :src="chargeImg" mode="scaleToFill" @tap='chooseChargeImg'></image>
			<small-title v-if="status > -1" content="处理进度"></small-title>
			<proccess-bar  v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===1 && userRightDetail.decoration.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="allot(0,'楼层管家已指派绘图人员',tval)">发起指派</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===7 && userRightDetail.decoration.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="allot(1,'楼层管家已指派工程负责人',tval2)">发起指派</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===3 && userRightDetail.decoration.mapCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="designDrawing">上传设计图</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===4 && userRightDetail.decoration.mapVerRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="verify(1,0)">审核通过</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回</button>
				</view>
			</view>
			<view v-if="status===2 && userRightDetail.decoration.engVerRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="verify(2,0)">审核通过</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回</button>
				</view>
			</view>
			<view v-if="(status===0 || status===6) && userRightDetail.decoration.leaderVerRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="verify(0,0)">审核通过</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回</button>
				</view>
			</view>
			<view v-if="status===8 && userRightDetail.decoration.engCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmCheck">确认验收</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2
	} from "../../..//util/network.js"
	import {
		myUploadFile,
		myDownloadFile,
		syncGetOrder,
		syncGetSysUsr,
		syncGetSysUsrInfo,
	} from "../../..//util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				userRightDetail:'',
				token:'',
				recordId:'',
				processNo:'待分配',
				state: '待受理',
				status: -1,
				selfChecked: false,
				publicChecked: false,
				imageUrl: ['../../../static/add-logo.svg','../../../static/add-logo.svg','../../../static/add-logo.svg',
					'../../../static/add-logo.svg','../../../static/add-logo.svg','../../../static/add-logo.svg',
					0,0,0,0,0,0
					],
				imageValue:[],
				imageTemps:[],
				allPrice: 0,
				chargeImg:'/static/uploadImg.png',                                     //支付信息截图
				chargeImgId: 0,
				nopassReasons:"审核通过",
				current: 0,
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				datalist: [],
				tval: "",
				datalist2: [],
				tval2: "",
				previewUrl:ONLINE_SERVER_ADDRESS_BASE_2 + '/file/preview/'
			}
		},
		methods: {
			select(e){
				console.log(e)
				e.tempFiles.forEach(item => {
					let a = myUploadFile(this.token, item.path)
					 a.then((v)=>{
						 let temp = {}
						 temp.url = item.url
						 temp.id = v
						 this.imageTemps.push(temp)
						 console.log(this.imageTemps)
					})
				})
			
			},
			deleteImg(e){
				// this.imageTemps.forEach((item, index) => {
				for (var i = 0; i < this.imageTemps.length; i++) {
					if(this.imageTemps[i].url == e.tempFile.url){
						this.imageTemps.splice(i, 1)
						break;
					}
				}
				console.log(this.imageTemps)
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					if(this.status == 4){
						this.nopassReasons = "绘图主管已驳回，原因：" + value
						this.verify(1,1)
					}
					if(this.status == 2){
						this.nopassReasons = "工程主管已驳回，原因：" + value
						this.verify(2,1)
					}
					if(this.status == 0 || this.status == 6){
						this.nopassReasons = "总监已驳回，原因：" + value
						this.verify(0,1)
					}
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
			selectitem(index, item) {
				if (index >= 0) {
					this.tval = item.value;
				} else {
					this.tval = ""
				}
			},
			selectitem2(index, item) {
				if (index >= 0) {
					this.tval2 = item.value;
				} else {
					this.tval2 = ""
				}
			},
			previewPicture(e){
				console.log(this.imageUrl.slice(e,e+1))
				uni.previewImage({
					urls:this.imageUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			chooseSelf(){
				if(this.state === '待申请' || this.state === '已驳回'){
					this.selfChecked = true
				}
			},
			chooseOther(){
				if(this.state === '待申请' || this.state === '已驳回'){
					this.selfChecked = false
				}
			},
			choosePublic(){
				if(this.state === '待申请' || this.state === '已驳回'){
					this.publicChecked = true
				}
			},
			chooseWork(){
				if(this.state === '待申请' || this.state === '已驳回'){
					this.publicChecked = false
				}
			},
			/*
			功能：支付截图点击事件触发修改或预览照片，如果是待申请 则点击修改照片，否则则是预览
			参数：无
			*/
			chooseImage(index){
				if(this.status === 3 && this.userRightDetail.decoration.mapCommRight) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['original'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.imageUrl[index + 6] = v
								 console.log("ceshi2",v)
							})
							this.imageUrl[index] = res.tempFilePaths[0];
							console.log("ceshi",this.imageUrl[index])
							console.log("ceshi2",this.imageUrl[index + 6])
							this.$forceUpdate()
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.imageUrl[index]]
					})
				}
			},
			chooseChargeImg(){
				if(this.status === 7) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['original'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.chargeImgId = v
							})
							this.chargeImg = res.tempFilePaths[0];
							this.$forceUpdate()
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.chargeImg]
					})
				}
			},
			async loadImg(chargeFileId){
				// let _this = this
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			confirmCheck(){
				console.log("[info]","工程验收：" + this.recordId)
				if(this.userRightDetail.decoration.primeAuth == 7){
					this.nopassReasons = "工程主管已验收"
				}else{
					this.nopassReasons = "工程专员已验收"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/decoration/confirm-check/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("工程验收调用",res.data)
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("工程验收调用失败")
					}
				})
			},
			verify(verifyType,status){
				if(status == 0){
					if(this.status == 4){
						this.nopassReasons = "绘图主管" + this.nopassReasons
					}
					if(this.status == 2){
						this.nopassReasons = "工程主管" + this.nopassReasons
					}
					if(this.status == 0 || this.status == 6){
						this.nopassReasons = "总监" + this.nopassReasons
					}
				}
				console.log("[info]","装修审核：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/decoration/verify/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						nopassReasons:this.nopassReasons,
						verifyType:verifyType,
						verifyResult:status,
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("装修审核调用失败")
					}
				})
			},
			designDrawing(){
				console.log("[info]","绘图上传设计图：" + this.recordId)
				let imgArray = []
				for (var i = 0; i < this.imageTemps.length; i++) {
					imgArray.push(this.imageTemps[i].id)
				}
				if(imgArray.length == 0){
					uni.showModal({
						content:'请上传平面设计图',
						showCancel:false
					});
					return 0
				}
				if(this.userRightDetail.decoration.primeAuth == 9){
					this.nopassReasons = "绘图主管已上传平面设计图"
				}else{
					this.nopassReasons = "绘图专员已上传平面设计图"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/decoration/upload/design-drawing/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						fileIds:imgArray,
						// userIds:JSON.stringify([parseInt(this.tval)]),
						userId:parseInt(this.tval),
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("绘图上传设计图调用",res.data)
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("绘图上传设计图调用失败")
					}
				})
			},
			allot(allotType,commentMsg,userId){
				if(userId == ""){
					uni.showModal({
						content:'请选择指派人员',
						showCancel:false
					});
					return 0
				}
				if(allotType == 1 && this.chargeImgId == 0){
					uni.showModal({
						content:'请上传支付截图',
						showCancel:false
					});
					return 0
				}
				let content = ''
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					this.nopassReasons = commentMsg.replace('楼层管家','运营主管')
					content = "运营主管已上传支付截图"
				}else{
					this.nopassReasons = commentMsg
					content = "楼层管家已上传支付截图"
				}
				if(allotType == 1){
					console.log("[info]","装修管家指派绘图：" + this.recordId)
					uni.request({
						url:`${ONLINE_SERVER_ADDRESS_BASE_2}/decoration/upload/pay-screenshot/` + this.recordId,
						header: {
							'Authorization': this.token,
						},
						data: {
							allotType:allotType,
							fileId:this.chargeImgId,
							commentMsg: content,                       //操作信息
						},
						method:'POST',
						success: function (res) {
							console.log("装修管家指派调用",res.data)
						},
						fail: (res) => {
							console.log("装修管家指派调用失败")
						}
					})
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/decoration/allot/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						allotType:allotType,
						// userIds:JSON.stringify([parseInt(this.tval)]),
						userId:parseInt(userId),
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("装修管家指派调用",res.data)
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("装修管家指派调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("decoration/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = res.data.data.auditStatus
						 switch(this.status) {
						 	 case 0:
						 		this.state = "待总监审核"
						 		break;
						 	 case 1:
						 		this.state = "待指派绘图"
						 		break;
						 	 case 2:
						 		this.state = "待工程审核"
						 		break;
						 	 case 3:
						 		this.state = "待绘图上传"
						 		break;
						 	 case 4:
						 		this.state = "待绘图审核"
						 		break;
						 	 case 5:
						 		this.state = "待确认绘图"
						 		break;
						 	 case 6:
						 		this.state = "待总监审核"
						 		break;
						 	 case 7:
						 		this.state = "待指派工程"
						 		break;
						 	 case 8:
						 		this.state = "待工程验收"
						 		break;
						 	 case 9:
						 		this.state = "待客户验收"
						 		break;
						 	 case 10:
						 		this.state = "已验收办结"
						 		break;
						 	 case 11:
						 		this.state = "总监已驳回"
						 		break;
						 	 case 12:
						 		this.state = "已撤回工单"
						 		break;
						 	 case 13:
						 		this.state = "工程已驳回"
						 		break;
						      default:
						 	    this.status = -1
						         this.state = "待申请"
						 } 
							if(res.data.data.status == 0){
								this.selfChecked = false
								this.publicChecked = false
							}else if(res.data.data.status == 1){
								this.selfChecked = false
								this.publicChecked = true
							}else{
								this.selfChecked = true
								this.publicChecked = true
							}
						 this.userMsg.userCompany = res.data.data.createUserInfo.name
						 this.userMsg.userBuilding = res.data.data.createUserInfo.title
						 this.userMsg.userFloor = res.data.data.createUserInfo.floor
						 this.userMsg.userRoom = res.data.data.createUserInfo.houseNumber
						 this.processNo = res.data.data.processOn
						 if(this.status > 1 && this.publicChecked){ //如果是已指派过的状态 则按id查询工程专员
						 	let b = syncGetSysUsrInfo("systemuser/show/" + parseInt(res.data.data.drawSpecialistId));
						 	b.then((v)=>{
						 		 if(v.data.code == 200){
									 let temp = {label: "",value: ""}
									 temp.label = v.data.data.name
									 temp.value = res.data.data.drawSpecialistId
									 this.datalist.push(temp)
						 			 this.tval = temp.value
						 			 this.$forceUpdate()
						 		}
						 	})
						 }
						 if(this.status > 7 && this.status < 11){ //如果是已指派过的状态 则按id查询工程专员
						 	let b = syncGetSysUsrInfo("systemuser/show/" + parseInt(res.data.data.engineerSpecialistId));
						 	b.then((v)=>{
						 		 if(v.data.code == 200){
									 let temp2 = {label: "",value: ""}
									 temp2.label = v.data.data.name
									 temp2.value = res.data.data.engineerSpecialistId
									 this.datalist2.push(temp2)
						 			 this.tval2 = temp2.value
						 			 this.$forceUpdate()
						 		}
						 	})
						 }
						 if(this.status == 1){ //如果是待指派状态 则按区域查询绘图专员
						 	var areaId = uni.getStorageSync("currentUser").area_id
						 	let a = syncGetSysUsr("systemuser/area-auth/users", areaId, 10);
						 	a.then((res)=>{
						 		 if(res.data.code == 200){
						 			let resList = res.data.data.systemUserList
						 			resList.forEach((item,key) => {
						 				let temp = {label: "",value: ""}
						 				temp.label = item.name
						 				temp.value = item.id.toString()
						 				this.datalist.push(temp)
						 			});
						 			this.$forceUpdate()
						 		}
						 	})
						 }
						 if(this.status == 7){ //如果是待指派状态 则按区域查询绘图专员
						 	var areaId = uni.getStorageSync("currentUser").area_id
						 	let a = syncGetSysUsr("systemuser/area-auth/users", areaId, 8);
						 	a.then((res)=>{
						 		 if(res.data.code == 200){
						 			let resList2 = res.data.data.systemUserList
						 			resList2.forEach((item,key) => {
						 				let temp = {label: "",value: ""}
						 				temp.label = item.name
						 				temp.value = item.id.toString()
						 				this.datalist2.push(temp)
						 			});
						 			this.$forceUpdate()
						 		}
						 	})
						 }
						 try{
						 	 var photoArray = res.data.data.designDiagramId.split(",")
							 this.imageValue = []
							 this.imageTemps = []
							 for (var i = 0; i < photoArray.length; i++) {
								let index = i
								let temp = {}
								temp.url = this.previewUrl + photoArray[i]
								temp.id = parseInt(photoArray[i])
								this.imageTemps.push(temp)
								this.imageValue.push(temp)
							 }
						 }catch(e){
						 	//TODO handle the exception
							var photoArray = []
						 }
						 if(res.data.data.payScreenshotId != null){
						 	let b = this.loadImg(res.data.data.payScreenshotId)
						 	b.then((v)=>{
						 		this.chargeImg = v
						 		this.$forceUpdate()
						 	})
						 }
						 this.proccessListDefult = processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 this.$forceUpdate()
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			if(uni.getStorageSync('userinfo') != null){
				this.userRightDetail = uni.getStorageSync("userRight")
				this.recordId = option.id
				console.log(this.status)
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 300rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 300rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.picture-part{
		display: flex;
		margin: 0 0 50rpx 0;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 170rpx;
		height: 170rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 170rpx;
		height: 170rpx;
		margin: 0 0 10rpx 0rpx;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
	.payway-first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.payway-second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
		width: 87%;
	}
	.pay-image{
		margin: 20rpx 0 20rpx 50rpx;
		width: 205rpx;
		height: 205rpx;
	}
	.pay-image-border{
		border:2rpx solid;
		border-radius: 2px;
		margin: 20rpx 0 20rpx 50rpx;
		width: 201rpx;
		height: 201rpx;
	}
	.img-repair{
		margin: 20rpx 50rpx 20rpx 50rpx;
	}
</style>
